<extend name="./Application/Home/View/Public/Base/common.html" />
<block name="title">录像管理</block>
<block name="breadcrumb">
    <a class="maincolor" href="{:U('Home/Devlist/index')}">设备管理</a> &gt 录像管理
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</block>
<block name="body">
    <style>

        .mk-hasbtn{
            margin-top: 15px;
            position: relative;
        }

        .page-nation-botton,.page-nation-up,.page-nation-down{
            width: 30px;
            height: 30px;
            border: 1px solid #dcdcdc;
            display: inline-block;
            margin-top: 2px;
            text-align: center;
            line-height: 30px;
            border-radius: 3px;
            cursor: pointer;
        }

        .page-nation-up,.page-nation-down{
            width: 50px;
        }

        #pageNation{
            height: 35px;
            position: absolute;
            right: 0px;
            bottom: -50px;
        }

        .table th,.table td{
            font-size: 13px;
        }

        .table th{
            background: #E0EAF6 !important;
        }

        .search-button{
            position: absolute;
            left:520px;
        }

        .button-img{
            width: 18px;
            margin-bottom: 2px;
            margin-right: 5px;
        }
    </style>
    <article class="cl pd-20">
        <div>
            <span>开始时间：</span>
            <input id="startTime" type="text" class="input-text radius size-MINI" style="width: 10%;height: 30px;font-size: 13px;">
            <span>结束时间：</span>
            <input type="text" id="endTime" class="input-text radius size-MINI" style="width: 10%;height: 30px;font-size: 13px;">
            <span class="l r search-button" >
                <a href="javascript:;" id="mkJsSearch" class="btn radius" style="background: #F5F8F9;"><img  class="button-img" src="__HUI__/images/search.png">搜索</a>
        </span>
        </div>
        <div class="mt-20 mk-hasbtn">
            <table class="table table-border table-bordered table-bg table-hover table-sort">
                <thead>
                <tr class="text-c">
                    <th width="15%">文件ID</th>
                    <th width="20%">文件开始时间</th>
                    <th width="20%">文件结束时间</th>
                    <th width="20%">储存文件载体ID</th>
                    <th width="25%">文件存储路径</th>
                </tr>
                </thead>
                <tbody>
                <volist name = "array['files']" id = 'row' key="k">
                    <tr class="text-c">
                        <td>{$row['fileid']}</td>
                        <td>{$row['filestarttime']|date='Y-m-d H:i:s',###}</td>
                        <td>{$row['fileendtime']|date='Y-m-d H:i:s',###}</td>
                        <td>{$row['storesvrid']}</td>
                        <td>{$row['filepath']}</td>
                    </tr>
                </volist>
                </tbody>
                <div id="pageNation">
                    <if condition="($pagesum gt 1) AND ($page neq 1)">
                        <span class="page-nation-up" onclick="pageUp();">上一页</span>
                    </if>
                    <if condition="$pagesum gt 1">
                        <for start="0" end="$pagesum">
                            <span class="page-nation-botton" onclick="pageGo({$i+1});">{$i+1}</span>
                        </for>
                    </if>
                    <if condition="($pagesum gt 1) AND ($pagesum gt $page)">
                        <span class="page-nation-down" onclick="pageDown();">下一页</span>
                    </if>
                    <if condition="$pagesum gt 1">
                        <span style="display: inline-block;width: 50px;border: 1px solid #cccccc;text-align: center;border-radius: 3px;background: rgb(219, 247, 253);">共{$pagesum}页</span>
                    </if>
                </div>
            </table>
        </div>
        <script type="text/javascript" src="__HUI__/lib/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="__HUI__/laydate/laydate.js"></script>
        <script type="text/javascript">
            var myDate = new Date();
            var todayYear = myDate.getFullYear();
            var todayMonth = myDate.getMonth() + 1;
            var todayDate = myDate.getDate();
            var todayStart = todayYear+"-"+todayMonth+"-"+todayDate+" 00:00:00";
            var todayEnd = todayYear+"-"+todayMonth+"-"+todayDate+" 23:59:59"

            laydate.render({
                elem: '#startTime',//指定元素
                type: 'datetime',
                value: todayStart
            });
            laydate.render({
                elem: '#endTime', //指定元素
                type: 'datetime',
                value: todayEnd
            });

            var page = 1;
            if({$page}){
                page = {$page};
            }
            setTimeout(function(){
                $(".page-nation-botton").each(function(){
                    if($(this).text() == page){
                        $(this).css("background","#DBF7FD");
                    }else{
                        $(this).css("background","white");
                    }
                })
            },200);

            $("#mkJsSearch").click(function(){
                var startTime = $("#startTime").val();
                var endTime = $("#endTime").val();
                window.location.href = "{:U('Home/Devlist/getDevVideo')}"+"?devicemark="+'{$devicemark}'+"&starttime="+startTime+"&endtime="+endTime;
            });

            //上一页
            function pageUp() {
                var num;
                if(page==1){
                    num = page;
                }else{
                    num = page-1;
                }
                window.location.href = "{:U('Home/Devlist/getDevVideo')}"+"?page="+num+"&devicemark="+'{$devicemark}';
            }

            //下一页
            function pageDown(){
                var num;
                if({$pagesum}==page){
                    num = page;
                }else{
                    num = page+1;
                }
                window.location.href = "{:U('Home/Devlist/getDevVideo')}"+"?page="+num+"&devicemark="+'{$devicemark}';
            }

            //指定页
            function pageGo(num) {
                page = num;
                window.location.href = "{:U('Home/Devlist/getDevVideo')}"+"?page="+num+"&devicemark="+'{$devicemark}';
            }
        </script>
    </article>
</block>
